import React, {useEffect} from 'react';
import {Form, Input} from "antd";
import {QuestionTextareaPropType} from "./index";

const PropComponent: React.FC<QuestionTextareaPropType> = (props: QuestionTextareaPropType) => {
  const {disabled = false, title = '', onChange, placeholder = ''} = props
  const [form] = Form.useForm()
  useEffect(() => {
    form.setFieldsValue({title, placeholder})
  }, [title, placeholder]);

  function handleChange() {
    if (!onChange) return
    onChange(form.getFieldsValue())
  }

  return (
    <Form
      form={form}
      disabled={disabled} layout={'vertical'}
      onValuesChange={handleChange}
    >
      <Form.Item label={'标题'} name={'title'} rules={[{required: true, message: '请输入标题内容'}]}>
        <Input/>
      </Form.Item>
      <Form.Item label={'Placeholder'} name={'placeholder'}>
        <Input/>
      </Form.Item>
    </Form>
  );
};

export default PropComponent;
